<!-- 企业统计 -->
<template>
    <div class="right_equipment_statistics">
        <div class="equipment_statistics_echarts">
            <chart-view :chart-option="state.equipmentStatistics" :auto-resize="true" height="132px"></chart-view>
            <div class="chartInfo">
                <h3>344</h3>
                <p>企业总数</p>
            </div>
        </div>
        <div class="statistics">
            <div v-for="(item, index) in state.statisticsList" :key="index">
                <div class="fl">
                    <span :style="{ background: item.back }"></span>
                    <span>{{ item.name }}</span>
                </div>
                <div class="fr">
                    <span :style="{ color: item.back }">{{ item.num }}</span>
                    <span :style="{ color: item.back }">{{ item.rate }}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, onMounted, nextTick } from 'vue';
import { EchartsMethods } from '@/chart/index';

const datas = {
    alpha: 35,
    distance: 160,
    top: '-5%',
    pieData: 60,
    autoRotate: false,
    item: [
        {
            name: '危化品生产',
            value: 37,
            itemStyle: {
                color: '#23FFFC'
            }
        },
        {
            name: '危化品经营',
            value: 44,
            itemStyle: {
                color: '#0066FF'
            }
        },
        {
            name: '危化品使用',
            value: 32,
            itemStyle: {
                color: '#30FFAF'
            }
        },
        {
            name: '其他',
            value: 16,
            itemStyle: {
                color: '#FFDA30'
            }
        }
    ]
};
const state = reactive({
    statisticsList: [
        {
            back: '#23FFFC',
            name: '危化品生产',
            num: '202',
            rate: '64%'
        },
        {
            back: '#0066FF',
            name: '危化品经营',
            num: '100',
            rate: '16%'
        },
        {
            back: '#30FFAF',
            name: '危化品使用',
            num: '42',
            rate: '12%'
        },
        {
            back: '#FFDA30',
            name: '其他',
            num: '20',
            rate: '8%'
        }
    ],
    equipmentStatistics: {}
});
onMounted(() => {
    nextTick(() => {
        state.equipmentStatistics = EchartsMethods.equipmentStatistics(datas);
    });
});
</script>

<style scoped lang="scss">
.right_equipment_statistics {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .equipment_statistics_echarts {
        width: 40%;
        position: relative;
        .chartInfo {
            position: absolute;
            width: 100%;
            top: 10px;
            text-align: center;
            color: #fff;
            h3 {
                font-size: 24px;
                letter-spacing: 2px;
                font-weight: 100;
                @include pmzd();
            }
            p {
                font-size: 12px;
            }
        }
    }
    .statistics {
        width: 54%;
        > div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            &:last-of-type {
                margin-bottom: 0;
            }
        }
        .fl {
            width: 55%;
            display: flex;
            align-items: center;
            span:first-of-type {
                width: 10px;
                height: 10px;
                display: inline-block;
                margin-right: 5px;
            }
            span:last-of-type {
                @include fontCustomStyle(#ffffff, 12px);
            }
        }
        .fr {
            font-size: 14px;
            @include pmzd();
            font-weight: 400;
            flex: 1;
            letter-spacing: 1px;
            span {
                display: inline-block;
                width: 50%;
                &:last-of-type {
                    width: 30%;
                }
            }
        }
    }
}
</style>
